<template>
  <div class="app-container">
    <div class="message-container">
      <el-card class="message-card">
        <template #header>
          <div class="card-header">
            <span>消息推送设置</span>
          </div>
        </template>
        
        <div class="message-settings">
          <!-- Web页面消息推送 -->
          <div class="setting-item">
            <div class="setting-left">
              <el-checkbox v-model="webNotification.enabled">web页面消息推送</el-checkbox>
            </div>
            <div class="setting-right">
              <span class="setting-desc">浏览器右下角弹出消息框</span>
            </div>
          </div>
          
          <!-- 短信消息推送 -->
          <div class="setting-item">
            <div class="setting-left">
              <el-checkbox v-model="smsNotification.enabled">短信消息推送</el-checkbox>
            </div>
            <div class="setting-right">
              <span class="setting-desc">中国网建、创蓝253、阿里云短信服务、自定接口</span>
              <el-icon class="expand-icon"><ArrowRight /></el-icon>
            </div>
          </div>
          
          <!-- 提示信息 -->
          <div class="tips-container">
            <p>1.勾选对应服务前请先填写正确的相关服务开通时的关键信息。</p>
            <p>2.勾选后的服务项可以在平台配置时或后台程序中直接调用，否则平台配置时选项显示不可选，程序调用提示失败。</p>
          </div>
          
          <!-- 保存按钮 -->
          <div class="action-container">
            <el-button type="primary" @click="saveSettings">保存</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'

// Web页面消息推送设置
const webNotification = ref({
  enabled: true,
  // 其他配置项可以根据需要添加
})

// 短信消息推送设置
const smsNotification = ref({
  enabled: true,
  provider: 'aliyun', // 可选值：chinanetbuild, createlane253, aliyun, custom
  // 其他配置项可以根据需要添加
})

// 保存设置
const saveSettings = () => {
  // 这里添加保存逻辑
  console.log('保存设置', {
    webNotification: webNotification.value,
    smsNotification: smsNotification.value
  })
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 120px;
}

.message-container {
  max-width: 1000px;
  margin: 0 auto;
}

.message-card {
  margin-bottom: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.message-settings {
  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #ebeef5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .setting-left {
      display: flex;
      align-items: center;
    }
    
    .setting-right {
      display: flex;
      align-items: center;
      color: #909399;
      
      .setting-desc {
        margin-right: 10px;
      }
      
      .expand-icon {
        cursor: pointer;
      }
    }
  }
}

.tips-container {
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f9eb;
  border-radius: 4px;
  color: #67c23a;
  
  p {
    margin: 5px 0;
    line-height: 1.5;
  }
}

.action-container {
  margin-top: 20px;
  text-align: center;
}
</style>